<template>
  <div class="home">
    <div class="header">
      <van-icon name="search" size="25" class="icon"></van-icon>
      <div class="zb">直播</div>
    </div>
    <div class="nav-bar">
      <div class="nav-item">人才</div>
      <div class="nav-item">雇主</div>
      <div class="nav-item">合伙人</div>
      <div class="nav-item active">推荐</div>
      <div class="nav-item">关注</div>
      <div class="nav-item"><van-switch v-model="checked"  active-color="#037b01" inactive-color="#666" size="20"/></div>
    </div>
    <van-swipe
      style="height: 100vh"
      vertical
      @change="onChange"
      :show-indicators="false"
    >
      <van-swipe-item v-for="(item,index) in dataArr" :key="index">
        <div class="main" v-if="currentIndex === index">
          <video-player
            v-if="playerOptions.sources[0].src"
            class="video-player vjs-custom-skin" 
            ref="videoPlayer"
            :playsinline="false"
            :options="playerOptions"
          ></video-player>
          <div class="right_box">
            <div class="user_pic_cont">
              <img :src="item.href" alt="">
              <div class="attention">+</div>
            </div>
            <div class="common">
              <van-icon name="like" size="25" color="#ffffff"></van-icon>
              <span>{{item.like}}</span>
            </div>
            <div class="common">
              <van-icon name="star" size="25" color="#ffffff"></van-icon>
              <span>23</span>
            </div>
            <div class="common">
              <van-icon name="share" size="25" color="#ffffff"></van-icon>
              <span>23</span>
            </div>
            <div class="common">
              <van-icon name="chat" size="25" color="#ffffff"></van-icon>
              <span>23</span>
            </div>
            <div class="common">
              <van-icon name="smile" size="25" color="#ffffff"></van-icon>
            </div>
          </div>
          <div class="bottom-box">
            <div class="title">{{item.title}}</div>
            <div class="tag">
              <van-icon name="label-o"></van-icon>
              <span>工作简历</span>
            </div>
            <div class="gro">
              <van-icon name="location-o"></van-icon>
              <span>毕节市</span>
            </div>
          </div>  
        </div>
      </van-swipe-item>
    </van-swipe>
    
    <van-action-sheet v-model="show" class="sheet">
      <van-list
        v-model="loading"
        @load="onLoad"
        :offset="1"
        :immediate-check="false"
      >
        <div v-for="(item, index) in plist" :key="index" class="ovf pll">
          <div class="pl-l"><img :src="item.user.avatarUrl" alt="" /></div>
          <div class="pl-r">
            <div class="name1">{{ item.user.nickname }}</div>
            <div class="con">{{ item.content }}</div>
          </div>
        </div>
      </van-list>
    </van-action-sheet>
    <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#fff">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="chat-o">消息</van-tabbar-item>
      <van-tabbar-item icon="search">公益招聘</van-tabbar-item>
      <van-tabbar-item icon="friends-o">主页</van-tabbar-item>
      <van-tabbar-item icon="setting-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { list, mv, pl } from "@request/api";
import "../video/index";
import { videoPlayer } from "vue-video-player";
export default {
  name: "home",
  data() {
    return {
      checked:false,
      active:0,
      currentIndex:0,
      dataArr:[],
      list: "",
      id: "",
      show: false,
      dataLength: 1,
      inx: 0,
      artistName: "",
      name: "",
      isshow: true,
      plist: "",
      loading: false,
      page: 10,
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0, 3.0],
        autoplay: true, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        poster:"",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{ type: "video/mp4", src: "" }],
        width: document.documentElement.clientWidth,
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 分时
          durationDisplay: false, // 持续时间显示
          remainingTimeDisplay: false, // 剩余时间显示
          fullscreenToggle: true, //全屏按钮
          volumeMenuButton: false,
          playToggle:true,
        },
      },
    };
  },
  components: {
    videoPlayer,
  },
  mounted() {
    this.wait();
  },
  methods: {
    // 首次获取url
    async wait() {
      let res = await this.get();
        this.$set(this.playerOptions.sources[0], "src", res[this.inx].src);
      this.dataArr = res
    },
    // 加载评论
    onLoad() {
      setTimeout(() => {
        this.page += 10;
        this.getpl();
        this.loading = false;
      }, 500);
    },
    // 获取数据
    get() {
      return list(this.dataLength).then((res) => {
        return Promise.resolve(res.data);
      });
    },
    // 滑动触发
    async onChange(index) {
      this.currentIndex = index
      if (index < this.dataArr.length) {
        this.$set(this.playerOptions.sources[0], "src", this.dataArr[index].src);
      }
    },
    // 打开评论列表
    openPl() {
      this.show = true;
      this.getpl();
    },
  },
};
</script>
<style lang="less" scoped>
.home{
  position: relative;
  .header{
    display: flex;
    position: absolute;
    color: white;
    z-index: 99;
    top: 25px;
    .icon{
      margin: 0 15px;
    }
    .zb{
      font-size: 15px;
      border-bottom: 3px solid #ffffff;
    }
  }
  .bottom-box{
    position: absolute;
    bottom: 15vh;
    left: 5px;
    z-index: 99;
    color: #ffffff;
    opacity: .5;
    padding-left: 5px;
    .tag{
      margin: 10px 0;
      span{
        margin-left: 5px;
      }
    }
    .gro{
      span{
        margin-left: 5px;
      }
    }
  }
  .nav-bar{
    width: 100%;
    display: flex;
    justify-content: space-around;
    position: absolute;
    margin-top: 10vh;
    color: white;
    z-index: 99;
    font-size: 15px;
    .nav-item{
      &:nth-child(3){
        color: #bfb838;
      }
      &:last-child{
        opacity: .5;
      }
    }
    .active{
      font-weight: 600;
      transform: scale(1.2);
      &::after{
        display: block;
        content: '';
        padding-bottom: 3px;
        margin: 0 8px;
        border-bottom: 3px solid #ffffff;
      }
    }
  }
}
.main {
  position: relative;
  height: 100%;
}
.right_box {
  position: absolute;
  right: 2vh;
  bottom: 20vh;
  .user_pic_cont{
    position: relative;
    width: 45px;
    height: 45px;
    img{
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: white;
    }
    .attention{
      position: absolute;
      width: 15px;
      height: 15px;
      bottom: -7px;
      left: 50%;
      transform: translateX(-50%);
      color: white;
      background: red;
      text-align: center;
      line-height: 15px;
      border-radius: 50%;
    }
  }
  .common{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 25px 0;
    span{
      color: white;
      margin-top: 3px;
      font-size: 10px;
    }
  }
}
.sheet {
  height: 50vh;
  .pll {
    overflow: hidden;
    padding: 10px;
    border-bottom: 1px solid #f4f4f4;
    .pl-l {
      width: 20%;
      float: left;
    }
    .pl-l img {
      width: 55%;
      border-radius: 50%;
      animation: all ds 0.5s;
    }
    @keyframes ds {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    .pl-r {
      width: 78%;
      float: left;
    }
    .name1 {
      font-size: 14px;
      color: #666;
      font-weight: bold;
      margin-bottom: 5px;
    }
    .con {
      width: 100%;
      line-height: 24px;
      color: #333333;
      font-size: 14px;
    }
  }
}
/deep/ .van-tabbar--fixed{
  background-color: #034460;
}
</style>
